<template>
  <div class="music">
    <el-button type="primary" plain @click="drawer = true">添加</el-button>
    <el-drawer :title="title" :visible.sync="drawer">
      <div style="padding: 0 25px">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="音乐名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="音乐歌手" prop="singer">
            <el-input v-model="ruleForm.singer"></el-input>
          </el-form-item>
          <el-form-item label="歌曲时长" prop="time">
            <div style="display: flex;">
              <el-input v-model="ruleForm.m" placeholder="分钟"></el-input>
            <el-input v-model="ruleForm.s" placeholder="秒"></el-input>
            </div>

          </el-form-item>
          <el-form-item>
            <el-upload
              ref="upload"
              multiple
              :limit="5"
              action=""
              :on-exceed="handleExceed"
              :auto-upload="false"
              :on-change="changeFile"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取文件</el-button
              >
              <div slot="tip" class="el-upload__tip">
                只能上传pdf/word文件，且不超过5个
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">保存</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <el-table
      stripe
      height="600"
      fit
      highlight-current-row
      :data="tableData"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        v-for="item in columnData"
        :key="item.id"
        :label="item.label"
        :width="item.width"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row[item.value] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class pdfItem extends Vue {
  private drawer: boolean = false;
  private title: string = "添加";
  private ruleForm = {
    name: "zz",
    singer: "",
    m:"",
    s:""
  };
  private fileList: Array<File> = [];
  rules: any = {
    name: [{ required: true, message: "请输入音乐名称", trigger: "blur" }],
    singer: [{ required: true, message: "请输入歌手名称", trigger: "blur" }],
  };
  private tableData:Array<object> = []
  private columnData = [
    {
      id: 0,
      label: "id",
      width: "50",
      value: "id",
    },
    {
      id: 1,
      label: "音乐名",
      width: "100",
      value: "name",
    },
    {
      id: 2,
      label: "音乐歌手",
      width: "100",
      value: "singer",
    },
    {
      id: 3,
      label: "音乐",
      width: "600",
      value: "music",
    },
    {
      id:4,
      label:"时长",
      with:'100',
      value:"time"
    }
  ];
  changeFile(e: File, fileArr: Array<File>) {
    this.fileList = fileArr;
  }
  created(){
    this.searchFile()
  }
  handleExceed() {}
  submitForm(): void {
    let formData = new FormData();
    const time:string = parseInt(this.ruleForm.m)*60+parseInt(this.ruleForm.s)*1+''
    formData.append("name", this.ruleForm.name);
    formData.append("singer", this.ruleForm.singer);
    formData.append("time", time)
    let file = this.fileList.map((item) => (item as any).raw);
    for (const key in file) {
      console.log(file)
      formData.append("musicfile", file[key]);
    }
    console.log(file);
    
    this.$axios.post("/upload/music", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.error === -1) {
          this.drawer = false;
          this.$message.success("上传成功");
          this.resetruleForm()
          this.searchFile();
        } else {
          this.$message.warning("上传失败");
        }
    })
  }
  resetruleForm(){
    this.ruleForm= {name:"",singer:"",m:"",s:""}
    this.fileList = []
  }
  searchFile(){
    this.$axios.get("/music/search").then((res:any)=>{
      console.log(res);
      this.tableData = res.data.data
      this.tableData.forEach((item:any)=>item.time = item.time+'秒')
    })
  }
  handleEdit(index: any, row: any) {
    console.log(index, row);
  }
  handleDelete(index: any, row: any) {
    console.log(index, row);
    this.$axios.post("/music/del",{
      id:row.id,
      username:this.$store.state.user.userInfo.username
    }).then(res=>{
      if(res.data.error===-1){
        this.$message.success("删除成功");
        this.searchFile()
      }else{
        this.$message.warning("删除成功");
      }
    })
  }
}
</script>

<style lang="less" scoped>
.music {
  padding: 35px 25px 0px;
  .box-card {
    position: absolute;
    z-index: 99;
    width: 50%;
    left: 0;
    right: 0;
    margin: auto;
  }
}
</style>